<template>
  <div>
    <el-form :model="SerialPort" ref="PlcAddressRef"
             size="small" label-width="80px" label-position="left">
      <el-form-item label="名称" prop="DeviceName">
        <el-input v-model="SerialPort.DeviceName" placeholder="设备名称"></el-input>
      </el-form-item>
      <el-form-item label="IP" prop="Ip">
        <el-input v-model="SerialPort.Ip" placeholder="设备IP"></el-input>
      </el-form-item>
      <el-form-item label="端口/串口" prop="Port">
        <el-input v-model="SerialPort.Port" placeholder="设备端口"></el-input>
      </el-form-item>
      <el-form-item label="波特率" prop="baudRate">
        <el-input v-model="SerialPort.baudRate" placeholder="请输入波特率"></el-input>
      </el-form-item>
      <el-form-item label="校验位" prop="parity">
        <el-input v-model="SerialPort.parity" placeholder="请输入校验位"></el-input>
      </el-form-item>
      <el-form-item label="数据位" prop="dataBits">
        <el-input v-model="SerialPort.dataBits" placeholder="请输入数据位"></el-input>
      </el-form-item>
      <el-form-item label="停止位" prop="stopBits">
        <el-input v-model="SerialPort.stopBits" placeholder="请输入停止位"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="Desc">
        <el-input v-model="SerialPort.Desc" type="textarea" :rows="5" placeholder="请输入描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="SaveSerialPortBtn">保存
        </el-button>
        <el-button type="danger" round @click="DeleteSerialPortBtn">删除
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref, watch} from 'vue'
// @ts-ignore
import SysDriveApi from '@/api/flow/SysDriveApi.js';
import {ElMessageBox} from 'element-plus'
import {Device} from "@/api/DeviceApi";
import {MessageSuccess} from "@/utils";

const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
})
const SerialPort = ref({
  Id: 0,
  DeviceName: null,
  Ip: null,
  Port: null,
  baudRate: null,
  parity: null,
  dataBits: null,
  stopBits: null,
  DeviceType: 'SERIAL_PORT',
  Desc: null
})

const Emits = defineEmits(['close'])

/**
 * 保存
 * @constructor
 */
const SaveSerialPortBtn = () => {
  const _sp = SerialPort.value;
  _sp.DeviceType = 'SERIAL_PORT';
  new SysDriveApi().AddDrive(SerialPort.value, (res: any) => {
    Emits('close', res)
  })
}

/**
 * 删除
 * @constructor
 */
const DeleteSerialPortBtn = () => {
  ElMessageBox.confirm(
      '是否删除?',
      'Warning',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    Device.Delete(SerialPort.value.Id).then((de: any) => {
      if (de.IsSuccess) {
        MessageSuccess('删除成功');
        SerialPort.value = {
          Id: 0,
          DeviceName: null,
          Ip: null,
          Port: null,
          baudRate: null,
          parity: null,
          dataBits: null,
          stopBits: null,
          DeviceType: 'SERIAL_PORT',
          Desc: null
        }
        Emits('close', null)
      }
    })
  })
}

watch(() => props.id, (nv) => {
  InitSerialPort()
})
const InitSerialPort = () => {
  SerialPort.value = {
    Id: 0,
    DeviceName: null,
    Ip: null,
    Port: null,
    baudRate: null,
    parity: null,
    dataBits: null,
    stopBits: null,
    DeviceType: 'SERIAL_PORT',
    Desc: null
  };
  if (props.id > 0) {
    Device.Get(props.id).then((res: any) => {
      SerialPort.value = res.Data
    })
  }
}
onMounted(() => {
  InitSerialPort()
})
</script>

<style scoped lang="scss">

</style>
